<template>
  <div style="display: flex; justify-content: flex-end;">
    <div style="color: #666666;font-size: 12px;display: inline-block;line-height: 2;padding-right: 10px;">
      已加载 {{ commentList.length }} 条评论，共 {{ total }} 条
    </div>
    <a-button v-if="loading" size="small" type="primary" @click="load('stop')">暂停加载</a-button>
    <a-button v-else size="small" type="primary" @click="load('go')">继续加载</a-button>
  </div>
  <comment-pie-chart :data-source="commentList"/>
  <a-divider/>
  <base-table
    title="评论分析" 
    :scroll="{y:450}" 
    size="small" 
    :data-source="commentList" 
    :columns="columns"
  >
    <template #toolbar>
      <a-row type="flex">
        <a-col>
          <notice/>
        </a-col>
        <a-col flex="1">
        </a-col>
      </a-row>
    </template>
    <template #sku="record">
      <a-tooltip>
        <template #title>
          <template v-for="(val,label) in record.skuMap">
            {{ label }}:{{ val }}
          </template>
        </template>
        <div class="text-ellipsis" style="max-width: 200px;">
          <template v-for="(val,label) in record.skuMap">
            {{ label }}:{{ val }}
          </template>
        </div>
      </a-tooltip>
    </template>
    <template #userStar="record">
      <img :src="`${record.userStarPic}_sum.jpg`" style="height: 20px;max-width: 100%;"/>
    </template>
    <template #feedbackSlot="record">
      <a-tooltip>
        <template #title>
          {{ record.feedback }}
        </template>
        <div class="text-ellipsis" style="max-width: 200px;">
          {{ record.feedback }}
        </div>
      </a-tooltip>
    </template>
    <template #replySlot="record">
      <a-tooltip>
        <template #title>
          {{ record.appendedFeed?.reply }}
        </template>
        <div class="text-ellipsis" style="max-width: 200px;">
          {{ record.appendedFeed?.reply }}
        </div>
      </a-tooltip>
    </template>
    <template #appendedFeedbackSlot="record">
      <a-tooltip>
        <template #title>
          {{ record.appendedFeedback }}
        </template>
        <div class="text-ellipsis" style="max-width: 200px;">
          {{ record.appendedFeedback }}
        </div>
      </a-tooltip>
    </template>
    <template #appendedReplaySlot="record">
      <a-tooltip>
        <template #title>
          {{ record.appendedReplay }}
        </template>
        <div class="text-ellipsis" style="max-width: 200px;">
          {{ record.appendedReplay }}
        </div>
      </a-tooltip>
    </template>
    <template #video="record">
      <template v-if="Object.keys(record.video).length === 0">
        <a-tooltip>
        <template #title>
          <video :src="record.video.cloudVideoUrl"></video>
        </template>
        <div class="text-ellipsis" style="max-width: 200px;">
          <img :src="`${record.video.coverUrl}_sum.jpg`" style="width: 100%;cursor: pointer;"/>
        </div>
      </a-tooltip>
      </template>
      <template v-else>
        --
      </template>
    </template>
    <template #videoTypeSlot="record">
      <div class="text-ellipsis" style="max-width: 200px;">
          {{ record.video && Object.keys(record.video).length == 0 ? '无' : '有'}}
      </div>
    </template>
    <template #feedPicPathListSlot="record">
      <div style="display: flex;flex-direction: row;flex-wrap: nowrap;">
        <a-image-preview-group >
          <a-image v-for="item,index in record.feedPicPathList" :key="index" width="30" style="height: 30px;margin-right: 10px;" :src="`${item}_sum.jpg`" />
        </a-image-preview-group>
      </div>
    </template>
    <template #appendedFeedPicPathListSlot="record">
      <div style="display: flex;flex-direction: row;flex-wrap: wrap;">
        <a-image-preview-group >
          <template v-if="record.appendedFeed && record.appendedFeed.appendFeedPicPathList&&record.appendedFeed.appendFeedPicPathList.length">
            <a-image v-for="item in record.appendedFeed.appendFeedPicPathList" :key="item" width="30" style="height: 30px;margin-right: 10px;" :src="`${item}_sum.jpg`" />
          </template>
        </a-image-preview-group>
      </div>
    </template>
  </base-table>

</template>

<script setup lang="ts">
import { ref } from 'vue';
import CommentPieChart from "~/contentScripts/views/tao/detail/components/analysis/components/index/commentPieChart.vue";
import Notice from "~/contentScripts/views/tao/detail/components/notice.vue";

import { RateList } from './commentAnalysis';

const props = withDefaults(defineProps<{
  dataList: RateList[]
  total: number,
  loading: boolean,
}>(), {
})
const emit = defineEmits(['loadDataBtn'])

const loading = ref(false);
const total = ref(props.total);
const commentList = ref<RateList[]>(props.dataList);

const columns = [
  {
    dataIndex: 'skuValueStr',
    title: 'SKU规格',
    width: 200,
    dataType: 'custom',
    fixed: 'left',
    slot: 'sku',
    sorter:(a: RateList,b: RateList) => +(a.skuId) - +(b.skuId),
  },
  {
    dataIndex: 'skuId',
    title: 'SKUID',
    width: 120,
    fixed: 'left',
    sorter:(a: RateList,b: RateList) => +(a.skuId) - +(b.skuId),
  },
  {
    dataIndex: 'userNick',
    title: '昵称',
    width: 120,
    sorter:(a: RateList,b: RateList) => a.userNick.length - b.userNick.length,
  },
  {
    dataIndex: 'userStar',
    title: '等级',
    width: 120,
    align: 'center',
    sorter: (a: RateList, b: RateList) => parseInt(a.userStar) - parseInt(b.userStar),
    dataType: 'custom',
    slot: 'userStar',
  },
  {
    dataIndex: 'feedback',
    title: '首评内容',
    width: 120,
    slot: 'feedbackSlot',
    align: 'center',
    dataType: 'custom',
    sorter:(a: RateList, b: RateList) => a.feedback.length - b.feedback.length,
  },
  {
    dataIndex: 'feedbackDate',
    title: '首评时间',
    width: 120,
    sorter: (a: RateList, b: RateList) => new Date(a.feedbackDate).getTime() - new Date(b.feedbackDate).getTime(),
  },
  {
    dataIndex: 'feedPicPathList',
    title: '首评图片',
    dataType: 'custom',
    slot: 'feedPicPathListSlot',
    width: 150,
    ellipsis: true,
    sorter:(a: RateList, b: RateList)=>a.feedPicPathList?.length || 0 - (b.feedPicPathList ? b.feedPicPathList.length : 0),
  },
  {
    dataIndex: 'reply',
    title: '商家回复',
    width: 200,
    dataType: 'custom',
    slot: 'replySlot',
    sorter:(a: RateList, b: RateList)=>a.appendedFeed?.reply.length || 0 - (b.appendedFeed?.reply.length || 0),
  },
  {
    dataIndex: 'appendedFeedback',
    title: '追评内容',
    dataType: 'custom',
    width: 120,
    slot: 'appendedFeedbackSlot',
    sorter:(a: RateList, b: RateList)=>a.appendedFeedback.length-b.appendedFeedback.length,
  },
  {
    dataIndex: 'appendedFeedDate',
    title: '追评时间',
    width: 120,
    sorter: (a: RateList, b: RateList) => parseInt(a.appendedFeedDate==''?'0':a.appendedFeedDate.replaceAll('-','')) - parseInt(a.appendedFeedDate==''?'0':b.appendedFeedDate.replaceAll('-','')),
  },
  {
    dataIndex: 'appendedFeedPicPathList',
    title: '追评图片',
    dataType: 'custom',
    ellipsis: true,
    width: 150,
    slot: 'appendedFeedPicPathListSlot', // 
    sorter:(a: RateList, b: RateList)=>a.appendedFeedPicPathList.length-b.appendedFeedPicPathList.length,
  },
  {
    dataIndex: 'appendedReplay',
    title: '商家追加回复',
    dataType: 'custom',
    width: 120,
    slot: 'appendedReplaySlot',
    sorter:(a: RateList, b: RateList)=>a.appendedReplay.length-b.appendedReplay.length,
  },
  {
    dataIndex: 'video.cloudVideoUrl',
    title: '视频',
    width: 100,
    dataType: 'custom',
    ellipsis: true,
    slot: 'videoSlot',
  },
  {
    title: '评价视频',
    width: 100,
    dataType: 'custom',
    align: 'center',
    slot: 'videoTypeSlot'
  },
];

const load = (type: string) => {
  emit('loadDataBtn', type);
}
watch(props, (newVale) => {
  console.log('🚀 ~ newVale ~ newVale:', newVale);
  loading.value = newVale.loading;
})
</script>

<style scoped>
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>